<!DOCTYPE HTML>
<html>

	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style>
			.water {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear 1;
        }
         
        .no-water {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }
         
        .first-run {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash 5s linear 1;
        }
         
        .runing {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: run 10s linear infinite;
        }
         
        .runwater {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: run 10s linear infinite;
        }
         
        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
         
        @keyframes run {
            from {
                stroke-dasharray: 10, 5;
            }
            to {
                stroke-dasharray: 40, 5;
            }
        }
    </style>

	</head>

	<body>


		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
			<polyline class="pipeline" points="10,10 10,200 200,200 200,400 400,400 400,600" style="fill:white;stroke:gray;stroke-width:10px" />
			<polyline class="water" id="water" points="10,10 10,200 200,200" style="fill:white;stroke:#039BE5;stroke-width:10" />
			

			<polyline class="no-water" id="water2" points="200,200 200,400 400,400 400,600" style="fill:white;stroke:#039BE5;stroke-width:10" />


			<rect id="key" width="20" height="20" x=190 y=190 style="fill:gray;stroke-width:10;stroke:rgb(0,0,0)" />

			<text style="fill:black;" x=220 y=210 font-size="16" font-family="YouYuan" x="100" y="100" width="200" height="30">点击阀门
			</text>
		</svg>
		
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
		    <g fill="rgba(106,127,239,0.1)">
		        <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"></path>
		        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform>
		    </g>
		    <g fill="rgba(106,127,239,0.15)">
		        <path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 100 H 0 V 0"></path>
		        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3s" repeatCount="indefinite"></animateTransform>
		    </g>
		    <g fill="rgba(106,127,239,0.18)" transform="translate(-903.868 0)">
		        <path d="M 0 70 Q 135 36, 270 70 T 540 70 T 810 70 T 1080 70 V 100 H 0 V 0" transform="translate(-38.232284367796474, 0)"></path>
		        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-540" dur="2s" repeatCount="indefinite"></animateTransform>
		    </g>
		</svg> 

		<script type="text/javascript">
			var keybtn = document.querySelector('#key');
			var water1 = document.querySelector('#water');
			var water2 = document.querySelector('#water2');

			water2.addEventListener("webkitAnimationEnd", function(evt) { //动画结束时事件
				this.className.baseVal = "runing";
				water1.className.baseVal = "runing";
			}, false);

			water1.addEventListener("webkitAnimationEnd", function(evt) { //动画结束时事件
				this.style.strokeDashoffset = 0;
			}, false);

			keybtn.addEventListener("click", function() {
				water2.className.baseVal = "first-run";
			}, false);
		</script>
	</body>

</html>
